
<template>
  <div id="jm">
    <nav>
      <div id="such">
        <el-input placeholder="档案号/姓名" style="width:200px" v-model="suchval"></el-input>
        <el-button type="primary" @click="such">查询</el-button>
      </div>
      <div id="add">
        <el-button type="primary" @click="dialogFormVisible = true"><i class="el-icon-plus"></i>新增</el-button>
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="newuser" label-position="left">
            <el-form-item label="用户名：" :label-width="formLabelWidth">
              <el-input v-model="newuser.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名：" :label-width="formLabelWidth">
              <el-input v-model="newuser.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色:" :label-width="formLabelWidth">
              <el-select v-model="newuser.roleIds" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码：" :label-width="formLabelWidth" prop="pass">
              <el-input v-model="newuser.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="checkPass">
              <el-input v-model="newuser.password2" type="password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="联系电话：" :label-width="formLabelWidth">
              <el-input v-model="newuser.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" :label-width="formLabelWidth">
              <el-input v-model="newuser.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户头像：" :label-width="formLabelWidth">
              <el-upload list-type="picture-card" action="/tianfuHealth/uploadImage" :on-success="handle_success">

                <i slot=" default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>

            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;add()">确 定</el-button>
          </div>
        </el-dialog>

      </div>
    </nav>
    <div style="overflow: hidden;">
      <el-table ref="multipleTable" :data="Arr" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" :header-cell-style="{ background: 'black' }">

        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="username" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="name" label="真实姓名" align="center">
        </el-table-column>
        <el-table-column prop="rName" label="角色" align="center">
        </el-table-column>
        <el-table-column prop="logins" label="登录次数" align="center">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" align="center">
          <template slot-scope="scoped">
            <span>{{ scoped.row.status ?'是':"否"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column prop="created" label="添加日期" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="dialogFormVisibles = true; beforeup(scope.row)" type="text" size="small">
              编辑
            </el-button>

            <el-dialog title="修改用户" :visible.sync="dialogFormVisibles" width="500px">
              <el-form :model="upuser" label-position="left">
                <el-form-item label="用户名：" :label-width="formLabelWidth">
                  <el-input v-model="upuser.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名：" :label-width="formLabelWidth">
                  <el-input v-model="upuser.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色:" :label-width="formLabelWidth" align="left">
                  <el-select v-model="upuser.roleIds" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="formLabelWidth">
                  <el-input v-model="upuser.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" :label-width="formLabelWidth">
                  <el-input v-model="upuser.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户头像：" :label-width="formLabelWidth" align="left">
                  <el-upload list-type="picture-card" action="/tianfuHealth/uploadImage" :on-success="handle_success">

                    <i slot=" default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>

                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisibles = false; afterup()">确 定</el-button>
              </div>
            </el-dialog>

            <el-button @click="del(scope.row.id)" type="text" size="small">
              删除
            </el-button>
          </template>


        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal" align="center">
        </el-pagination>
      </div>

    </div>
  </div>


</template>

<script>
import template from '../healthIntervene/template.vue'


export default {
  components: { template },
  name: 'Display',

  data() {

    return {
      Arr: [],
      suchval: "",
      topage: '100',
      // 当前页数
      currentPage: 1,
      // 每页默认显示条数
      pageSize: 7,
      // 总条数
      pageTotal: 20,
      multipleSelection: [],
      dialogFormVisibles: false,
      dialogFormVisible: false,
      newuser: {
        email: "",
        image: "",
        name: "",
        password: "",
        password2: "",

        phone: "",
        roleIds: "",
        username: ""
      },
      upuser: {
        email: "",
        id: 0,
        image: "",
        name: "",
        password: "",
        phone: "",
        roleIds: "",
        username: "",
        creater: ""
      }
      ,


      formLabelWidth: '100px',
      options: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl: '',



    }


  },

  mounted() {
    this.Display()
  }
  ,

  methods: {
    Display() {
      this.$axios({//获取角色列表
        method: 'get',
        url: '/role/findAll',
      }).then((res) => {
        // //console.log(res.data);
        for (let i in res.data) {
          this.options.push({ value: res.data[i].id, label: res.data[i].name })

        }
        // //console.log(this.options);

        this.$axios({
          method: 'post',
          url: '/admin/list',
          data: {
            limit: this.pageSize,
            page: this.currentPage
          }
        }).then(res => {

          this.Arr = res.data
          this.pageTotal = res.count
        })

      })
    },
    del(id) {
      //console.log(id);
      this.$axios({
        method: 'get',
        url: '/admin/delete',
        params: { id }
      }).then((res) => {
        //console.log(res);
        this.Display();
      })
    },
    such() {
      this.$axios({
        method: 'post',
        url: '/admin/list',
        data: {
          limit: this.pageSize,
          name: this.suchval,
          page: this.currentPage
        }
      }).then(res => {
        //console.log(res);
        this.Arr = res.data
        this.pageTotal = res.count
      })
    },
    add() {
      //console.log(this.newuser);
      this.$axios({
        method: 'post',
        url: '/admin/add',
        data: this.newuser
      }).then(res => {
        if (res.code != 0) {
          //console.log(res.msg);
          this.$message.error(res.msg);
        } else {
          this.$message({
            message: '恭喜你，添加成功',
            type: 'success'
          });
          this.Display();
        }

      })
    },

    beforeup(row) {
      //console.log(row);
      this.upuser.email = row.email
      this.upuser.id = row.id
      this.upuser.image = row.image
      this.upuser.name = row.name
      this.upuser.phone = row.phone
      this.upuser.username = row.username
      this.upuser.roleIds = row.roleIds
    },
    afterup() {


      this.$axios({
        method: 'post',
        url: '/admin/update',
        data: this.upuser
      }).then(res => {
        //console.log(res);
        this.Display()


      })
    },


    handleSelectionChange(val) {

    },
    handleRemove(file) {
      //console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      //console.log(this.dialogImageUrl);
    },
    handleDownload(file) {
      //console.log(file);
    },
    handle_success(res) {
      //console.log(res)
      this.$message.success('图片上传成功')
      this.newuser.image = res.data

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);


    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      //console.log(`当前页: ${val}`);
    },


  }



}






</script>
<style scoped>
nav {
  background-color: #FFFFFF;
  padding: 20px 0 10px 0;
  margin-bottom: 10px;
}

#such {
  background-color: #FFFFFF;
  /* margin-left: 30px; */
}

#such>button {
  margin-left: 20px;
}

#add {
  color: yellow;
  margin: 10px 0 10px 0px;
}

#btn {
  margin-left: 20px;
}

#jm {

  margin-left: 20px;
}

h3 {
  margin-left: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>